<template>
  <div>
    <app-container>
      <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" />
      <div class="generate-block">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button type="primary">重置</el-button>
        <el-button type="primary">取消</el-button>
      </div>
    </app-container>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: {
        list: [
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 8,
                list: [
                  {
                    type: 'input',
                    name: '贷款借据号',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '00980101008',
                      required: true,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: false,
                      clearable: false,
                      remoteFunc: 'func_1542786454000_42612'
                    },
                    key: '1542786454000_42612',
                    model: 'input_1542786454000_42612',
                    rules: [
                      { type: 'string', message: '贷款借据号格式不正确' },
                      { required: true, message: '贷款借据号必须填写' }
                    ]
                  }
                ]
              },
              {
                span: 8,
                list: [
                  {
                    type: 'input',
                    name: '贷款账号',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '00982100000023',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542786457000_56291'
                    },
                    key: '1542786457000_56291',
                    model: 'input_1542786457000_56291',
                    rules: [{ type: 'string', message: '贷款账号格式不正确' }]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542786452000_52426'
            },
            key: '1542786452000_52426',
            model: 'grid_1542786452000_52426',
            rules: []
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 8,
                list: [
                  {
                    type: 'input',
                    name: '合同编号',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '0020010101',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542786472000_79588'
                    },
                    key: '1542786472000_79588',
                    model: 'input_1542786472000_79588',
                    rules: [{ type: 'string', message: '单行文本格式不正确' }]
                  }
                ]
              },
              {
                span: 8,
                list: [
                  {
                    type: 'input',
                    name: '公司代码',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '1001',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: true,
                      clearable: false,
                      remoteFunc: 'func_1542786476000_37624'
                    },
                    key: '1542786476000_37624',
                    model: 'input_1542786476000_37624',
                    rules: [{ type: 'string', message: '单行文本格式不正确' }]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542786470000_71381'
            },
            key: '1542786470000_71381',
            model: 'grid_1542786470000_71381',
            rules: []
          },
          {
            type: 'input',
            name: '成员公司名称',
            icon: 'regular/keyboard',
            options: {
              width: '30%',
              defaultValue: '中兴（沈阳）金融科技有限公司',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: true,
              clearable: false,
              remoteFunc: 'func_1542786482000_71844'
            },
            key: '1542786482000_71844',
            model: 'input_1542786482000_71844',
            rules: [{ type: 'string', message: '成员公司名称格式不正确' }]
          },
          {
            type: 'select',
            name: '货币代码',
            icon: 'regular/caret-square-down',
            options: {
              defaultValue: 'CNY人民币',
              multiple: false,
              disabled: true,
              clearable: false,
              placeholder: '',
              required: false,
              showLabel: false,
              width: '30%',
              options: [
                { value: 'CNY人民币' },
                { value: 'USD美元' },
                { value: 'EUR欧元' }
              ],
              remote: false,
              remoteOptions: [],
              props: { value: 'value', label: 'label' },
              remoteFunc: 'func_1542786487000_8539'
            },
            key: '1542786487000_8539',
            model: 'select_1542786487000_8539',
            rules: []
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 8,
                list: [
                  {
                    type: 'select',
                    name: '贷款形态',
                    icon: 'regular/caret-square-down',
                    options: {
                      defaultValue: '0-正常',
                      multiple: false,
                      disabled: true,
                      clearable: false,
                      placeholder: '',
                      required: false,
                      showLabel: false,
                      width: '100%',
                      options: [{ value: '0-正常' }],
                      remote: false,
                      remoteOptions: [],
                      props: { value: 'value', label: 'label' },
                      remoteFunc: 'func_1542786536000_71367'
                    },
                    key: '1542786536000_71367',
                    model: 'select_1542786536000_71367',
                    rules: []
                  }
                ]
              },
              {
                span: 8,
                list: [
                  {
                    type: 'select',
                    name: '贷款账户状态',
                    icon: 'regular/caret-square-down',
                    options: {
                      defaultValue: 'N-未生效',
                      multiple: false,
                      disabled: true,
                      clearable: false,
                      placeholder: '',
                      required: false,
                      showLabel: false,
                      width: '100%',
                      options: [{ value: 'N-未生效' }],
                      remote: false,
                      remoteOptions: [],
                      props: { value: 'value', label: 'label' },
                      remoteFunc: 'func_1542786537000_91901'
                    },
                    key: '1542786537000_91901',
                    model: 'select_1542786537000_91901',
                    rules: []
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542786504000_95532'
            },
            key: '1542786504000_95532',
            model: 'grid_1542786504000_95532',
            rules: []
          },
          {
            type: 'select',
            name: '资金来源',
            icon: 'regular/caret-square-down',
            options: {
              defaultValue: '1-转账',
              multiple: false,
              disabled: false,
              clearable: false,
              placeholder: '',
              required: true,
              showLabel: false,
              width: '30%',
              options: [
                { value: '0-现金' },
                { value: '1-转账' },
                { value: '2-待销账' }
              ],
              remote: false,
              remoteOptions: [],
              props: { value: 'value', label: 'label' },
              remoteFunc: 'func_1542786545000_91445'
            },
            key: '1542786545000_91445',
            model: 'select_1542786545000_91445',
            rules: [{ required: true, message: '资金来源必须填写' }]
          },
          {
            type: 'input',
            name: '核销来源账号',
            icon: 'regular/keyboard',
            options: {
              width: '30%',
              defaultValue: '',
              required: true,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: false,
              clearable: false,
              remoteFunc: 'func_1542786574000_96383'
            },
            key: '1542786574000_96383',
            model: 'input_1542786574000_96383',
            rules: [
              { type: 'string', message: '单行文本格式不正确' },
              { required: true, message: '核销来源账号必须填写' }
            ]
          },
          {
            type: 'input',
            name: '还款账号',
            icon: 'regular/keyboard',
            options: {
              width: '30%',
              defaultValue: '01008001000013',
              required: true,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: true,
              clearable: false,
              remoteFunc: 'func_1542786583000_59595'
            },
            key: '1542786583000_59595',
            model: 'input_1542786583000_59595',
            rules: [
              { type: 'string', message: '单行文本格式不正确' },
              { required: true, message: '还款账号必须填写' }
            ]
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 8,
                list: [
                  {
                    type: 'input',
                    name: '核销本金',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '26,500.00',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: false,
                      clearable: false,
                      remoteFunc: 'func_1542786590000_71801'
                    },
                    key: '1542786590000_71801',
                    model: 'input_1542786590000_71801',
                    rules: [{ type: 'string', message: '核销本金格式不正确' }]
                  }
                ]
              },
              {
                span: 8,
                list: [
                  {
                    type: 'input',
                    name: '核销利息',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '0.00',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: false,
                      clearable: false,
                      remoteFunc: 'func_1542786592000_90774'
                    },
                    key: '1542786592000_90774',
                    model: 'input_1542786592000_90774',
                    rules: [{ type: 'string', message: '单行文本格式不正确' }]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542786588000_4421'
            },
            key: '1542786588000_4421',
            model: 'grid_1542786588000_4421',
            rules: []
          },
          {
            type: 'grid',
            name: '栅格布局',
            icon: 'th',
            columns: [
              {
                span: 8,
                list: [
                  {
                    type: 'input',
                    name: '归还本金',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '10,000.00',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: false,
                      clearable: false,
                      remoteFunc: 'func_1542786598000_99515'
                    },
                    key: '1542786598000_99515',
                    model: 'input_1542786598000_99515',
                    rules: [{ type: 'string', message: '单行文本格式不正确' }]
                  }
                ]
              },
              {
                span: 8,
                list: [
                  {
                    type: 'input',
                    name: '归还利息',
                    icon: 'regular/keyboard',
                    options: {
                      width: '100%',
                      defaultValue: '0.00',
                      required: false,
                      dataType: 'string',
                      pattern: '',
                      placeholder: '',
                      readonly: false,
                      disabled: false,
                      clearable: false,
                      remoteFunc: 'func_1542786600000_13658'
                    },
                    key: '1542786600000_13658',
                    model: 'input_1542786600000_13658',
                    rules: [{ type: 'string', message: '单行文本格式不正确' }]
                  }
                ]
              }
            ],
            options: {
              gutter: 0,
              justify: 'start',
              align: 'top',
              remoteFunc: 'func_1542786595000_79500'
            },
            key: '1542786595000_79500',
            model: 'grid_1542786595000_79500',
            rules: []
          },
          {
            type: 'input',
            name: '归还罚金',
            icon: 'regular/keyboard',
            options: {
              width: '30%',
              defaultValue: '0.00',
              required: false,
              dataType: 'string',
              pattern: '',
              placeholder: '',
              readonly: false,
              disabled: false,
              clearable: false,
              remoteFunc: 'func_1542786604000_21906'
            },
            key: '1542786604000_21906',
            model: 'input_1542786604000_21906',
            rules: []
          }
        ],
        config: { labelWidth: 100, labelPosition: 'right' },
        table: {
          showRemove: false,
          showIndexCol: false,
          showEdit: false,
          showExport: false,
          showAdd: false,
          stripe: true,
          border: false
        }
      },
      editData: {},
      values: {},
      remoteFuncs: {

        OriginalInterestRateCodeType(resolve) {
          // 原利率代码类型 select_1542607354000_8
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('原利率代码类型').then(response => { resolve(response.data) })
        }

      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
